import React from 'react';
import { Button } from 'antd-mobile';
import { ReloadOutlined, HomeOutlined, ExclamationCircleOutlined   } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Error.css';

const Error = ({ errorMessage = "获取项目详情失败" }) => {
  const navigate = useNavigate();

  // 重新加载页面
  const handleReload = () => {
    window.location.reload();
  };

  // 返回首页
  const handleGoHome = () => {
    navigate('/');
  };

  return (
    <div className="error-page-container">
      {/* 装饰背景元素 */}
      <div className="error-bg-pattern"></div>
      
      {/* 错误内容卡片 */}
      <div className="error-card">
        {/* 错误图标 */}
        <div className="error-icon-wrapper">
          <ExclamationCircleOutlined className="error-icon" />
        </div>
        
        {/* 错误信息 */}
        <h2 className="error-title">加载失败</h2>
        <p className="error-message">{errorMessage}</p>
        
        {/* 操作按钮 */}
        <div className="error-actions">
          <Button 
            className="error-btn reload-btn" 
            onClick={handleReload}
          >
            <ReloadOutlined className="btn-icon" />
            重新加载
          </Button>
          <Button 
            className="error-btn home-btn" 
            onClick={handleGoHome}
          >
            <HomeOutlined className="btn-icon" />
            返回首页
          </Button>
        </div>
      </div>
      
      {/* 底部提示 */}
      <p className="error-footer">如有持续问题，请联系客服热线：400-123-4567</p>
    </div>
  );
};

export default Error;
